<!DOCTYPE html>
<html lang="en">
<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blue Ocean Environmental Protection - Protecting Marine Ecology</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header styles */
        header {
            background-color: #00b8e6;
            color: white;
            padding: 15px 0;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 30px;
            margin-right: 10px;
        }
        
        .nav-menu {
            display: flex;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
        }
        
        .user-actions {
            display: flex;
        }
        
        .user-actions button {
            background-color: white;
            color: #00b8e6;
            border: none;
            padding: 5px 10px;
            margin-left: 5px;
            cursor: pointer;
        }
        
        /* Main content styles */
        .mission-card {
            flex: 0 0 48%;
            border: 1px solid #00b8e6;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .mission-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #00b8e6;
        }
        
        .mission-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #333;
        }
        
        .mission-card p {
            margin-bottom: 20px;
            color: #666;
        }
        
        .btn {
            display: inline-block;
            background-color: #00b8e6;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #0099cc;
        }
        
        /* Conservation report page styles */
        .report-page {
            background-color: white;
            padding: 50px 0;
        }
        
        .report-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        
        .report-content h1 {
            font-size: 2rem;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .report-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 30px;
        }
        
        .report-content p {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .report-content ul {
            margin-left: 20px;
            margin-bottom: 20px;
        }
        
        .report-content li {
            margin-bottom: 10px;
        }
        
        .highlight {
            font-weight: bold;
        }
        
        /* Footer styles */
        footer {
            background-color: #1a365d;
            color: white;
            padding: 30px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <nav id="navbarPlaceholder"></nav>

    <!-- Home Page -->
    <section class="home-page" id="home-page">
        <div class="container">
            <h1 style="text-align: center; font-size: 2.5rem; margin: 50px 0 30px;">Our Mission</h1>
            <div class="mission-cards">
                <div class="mission-card">
                    <div class="mission-icon">🗑️</div>
                    <h3>Marine pollution control</h3>
                    <p>Develop a smart garbage recycling system and implement a shoreline cleanup program</p>
                    <a href="#" class="btn" id="learn-more-home">Learn more</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Conservation Report Page -->
    <section class="report-page" id="pollution-report">
        <div class="container">
            <div class="report-content">
                <h1>Marine Pollution Control Efforts</h1>
                
                <p>Over the past years, our organization has implemented a comprehensive marine pollution control strategy. These efforts have significantly reduced plastic and other waste in coastal areas, with pollution levels showing a downward trend.</p>
                <p>Our smart garbage recycling system has been deployed in multiple coastal communities, and shoreline cleanup programs have engaged thousands of volunteers. These initiatives have resulted in:</p>
                <ul>
                    <li>A <span class="highlight">reduction of marine debris</span> by approximately 40% in target areas,</li>
                    <li>Recycling of <span class="highlight">over 50 tons of plastic waste</span> annually,</li>
                    <li>Protection of <span class="highlight">marine wildlife habitats</span> from pollution threats,</li>
                    <li>Improvement of <span class="highlight">water quality</span> in coastal regions,</li>
                    <li>Establishment of <span class="highlight">sustainable waste management practices</span> in coastal communities.</li>
                </ul>
                <p>By the end of 2023, we aim to expand our pollution control initiatives to cover an additional 200 kilometers of coastline and further improve the effectiveness of our recycling systems.</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <nav id="footerPlaceholder"></nav>

    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/script.js"></script>
    <script src="./scripts/main.js"></script>

    <script>
        
        // Toggle between pages
        document.getElementById('learn-more-home').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('home-page').style.display = 'none';
            document.getElementById('pollution-report').style.display = 'block';
        });
    </script>
</body>
</html>